<template>
    <div>
        <CardBox v-for="item in list" :key="item.id" :footer="true" :title="item.jobAreaName ? `${item.projectName}-${item.jobAreaName}` : `${item.projectName}`">
            <el-row :gutter="24">
                <el-col v-if="item.workAmount" :span="8" class="item">
                    <span class="label">工程量：</span>
                    <span class="value">{{ item.workAmount }}{{ item.arithmeticalUnit }}</span>
                </el-col>
                <el-col :span="8" class="item">
                    <span class="label">计划完成金额：</span>
                    <span class="value">{{ item.prepareCompletionMoney }}元</span>
                </el-col>
            </el-row>
            <template slot="footer">
                <el-row :gutter="24">
                    <el-col :span="24" class="card-title">实施报告</el-col>
                    <el-col :span="8" class="item">
                        <span class="label">桩号：</span>
                        <span class="value">K{{ item.startStake }}~K{{ item.endStake }}</span>
                    </el-col>
                    <el-col :span="8" class="item">
                        <span class="label">本期实际完成量：</span>
                        <span class="value">{{ item.completedAmount }}{{ item.arithmeticalUnit }}</span>
                    </el-col>
                    <el-col :span="8" class="item">
                        <span class="label">本期未完成量：</span>
                        <span class="value">{{ item.unCompletedAmount }}{{ item.arithmeticalUnit }}</span>
                    </el-col>
                    <el-col :span="8" class="item">
                        <span class="label">本期实际完成金额：</span>
                        <span class="value">{{ item.completedMoney }}元</span>
                    </el-col>
                    <el-col :span="8" class="item">
                        <span class="label">本期未完成金额：</span>
                        <span class="value">{{ item.unCompletedMoney }}元</span>
                    </el-col>
                    <el-col :span="8" class="item">
                        <span class="label">合同编号：</span>
                        <span class="value">{{ item.contractNum }}</span>
                    </el-col>
                    <el-col :span="8" class="item">
                        <span class="label">合同金额：</span>
                        <span class="value">{{ item.contractMoney }}元</span>
                    </el-col>
                    <el-col :span="8" class="item">
                        <span class="label">单价：</span>
                        <span class="value">{{ item.unitPrice }}元</span>
                    </el-col>
                    <el-col :span="8" class="item">
                        <span class="label">预计开/竣工时间：</span>
                        <span class="value">{{ item.startEndTime }}</span>
                    </el-col>
                </el-row>
            </template>
        </CardBox>
    </div>
</template>

<script>
export default {
    name: 'ItemCard',
    props: {
        list: {
            type: Array,
            default: () => ([])
        }
    }
}
</script>

<style lang="scss" scoped>
.card-title {
    font-size: 14px;
    font-weight: bold;
    color: #171725;
    margin-bottom: 16px;
}
</style>
